<template>
  <div>
    <!-- 头部 -->
    <DetailHeader :title="lists.sightName" />

    <!-- 图片与信息 -->
    <Danner :imgText="{ 
        sightName: lists.sightName, 
        bannerImg: lists.bannerImg,
        gallaryImgs: lists.gallaryImgs,
        information: lists.information,
      }" 
      v-if="lists.sightName && lists.bannerImg" 
    />

    <!-- 列表 -->
    <DetailList :lists="lists.categoryList" v-if="lists.categoryList.length" />
    <div class="abx"></div>
  </div>
</template>

<script>
import banner from "../detail/components/banner.vue";
import detailHeader from "../detail/components/detailHeader.vue";
import detailList from "../detail/components/detailList.vue";

export default {
  name: "detail",
  data() {
    return {    
      lists: {
        bannerImg: '',
        gallaryImgs: [],
        sightName: '',
        categoryList: [],
        information: {},
      },
    }
  },
  components: {
    Danner: banner,
    DetailHeader: detailHeader,
    DetailList: detailList,
  },

  methods: {
    detailAjax() {
      this.$axios({
        method: "get", 
        url: "detail/information", 
        data: {
          detailId: this.$router.currentRoute.params.id,
        }
      }).then(({data}) => {
        let value = data.data;
        this.lists.bannerImg = value.HeadList.bannerImg;  // 首页图片
        this.lists.gallaryImgs = value.HeadList.gallaryImgs;  // 图片列表
        this.lists.sightName = value.HeadList.sightName;    // 标题
        this.lists.information = value.HeadList.information;  // 图片信息

        this.lists.categoryList = value.categoryList;  // 列表信息   
        // console.log(this.lists.categoryList);     
      })
    }
  },

  mounted() {
    this.detailAjax();
  },
}
</script>

<style scoped>
  .abx {
    height: 600px;
  }
</style>